<template>
  <base-search-form
    v-model="searchForm"
    :form-items="formItems"
    @search="handleSearch"
    @reset="handleReset"
  >
    <template #time>
      <a-date-picker
        v-model:value="searchForm.note.time"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
      />
    </template>
  </base-search-form>
  <a-table
    :columns="columns"
    :data-source="data"
    bordered
    :pagination="{
      current: searchForm.pageNo,
      pageSize: searchForm.pageSize,
      total: total,
      pageSizeOptions: ['3', '20', '30', '40', '50', '100'],
      showSizeChanger: true,

      onChange: onPaginationChange,
    }"
  >
    <template #bodyCell="{ column, text }">
      <template v-if="column.dataIndex === 'name'">
        <a>{{ text }}</a>
      </template>
    </template>
    <template #title>Header</template>
    <template #footer>Footer</template>
  </a-table>
</template>

<script setup lang="ts">
const searchForm = reactive({
  name: undefined,
  note: { age: '', time: '' },
  pageNo: 1,
  pageSize: 3,
})
const total = ref(0)

const formItems = [
  {
    label: '姓名',
    field: 'name',
    placeholder: '请选择姓名',
    type: 'select',
    controlProps: {
      style: { width: '180px' },
      optionFilterProp: 'gdmc',
      options: [{ gdmc: 'test' }],
      fieldNames: { label: 'gdmc', value: 'gdmc' },
    },
  },
  {
    label: '年龄',
    field: ['note', 'age'],
    placeholder: '请输入年龄',
  },
  {
    field: ['note', 'time'],
    placeholder: '请选择时间',
  },
]

const handleSearch = (params: any) => {
  console.log('🚀 ~ params:', params)
}
const handleReset = (params: any) => {
  console.log('🚀 ~ params:', params)
}
const onPaginationChange = (a: any, b: any) => {
  console.log('🚀 ~ a:', a, b)
}
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Cash Assets',
    className: 'column-money',
    dataIndex: 'money',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
]

const data = [
  {
    key: '1',
    name: 'John Brown',
    money: '￥300,000.00',
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    money: '￥1,256,000.00',
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    money: '￥120,000.00',
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'John Brown',
    money: '￥300,000.00',
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '5',
    name: 'Jim Green',
    money: '￥1,256,000.00',
    address: 'London No. 1 Lake Park',
  },
  {
    key: '6',
    name: 'Joe Black',
    money: '￥120,000.00',
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '7',
    name: 'John Brown',
    money: '￥300,000.00',
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '8',
    name: 'Jim Green',
    money: '￥1,256,000.00',
    address: 'London No. 1 Lake Park',
  },
  {
    key: '9',
    name: 'Joe Black',
    money: '￥120,000.00',
    address: 'Sidney No. 1 Lake Park',
  },
]
</script>

<style scoped lang="scss"></style>
